<template>
  <el-dialog :model-value="show" title="分配角色" @close="emit('hide')">
    <el-form :model="form" ref="formRef" :rules="rules">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          v-model="form.description"
          autocomplete="off"
          :rows="4"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="是否启用">
        <el-radio-group v-model="form.status" class="ml-4">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="CancelFn">取消</el-button>
        <el-button type="primary" @click="addFn"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { addRoleAPI, editRoleAPI, getUserRoleAPI } from "./api";
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  id: {
    type: Number,
    default: 0,
  },
  name: {
    type: String,
    default: "",
  },
  description: {
    type: String,
    default: "",
  },
});

// 如果要传递一个 对象类型的 自定义属性，需要下面的写法
// interface IProp{
//     data: IRoleModel
// }
// const prop = withDefaults(defineProps<IProp>(), {})

const form = reactive<IRoleModel>({
  name: "",
  description: "",
  status: 0,
  id: 0,
});
const rules = {
  name: [{ required: true, trigger: "blur", message: "请输入角色名字" }],
};
const formRef = ref<FormInstance>();
const emit = defineEmits(["hide", "ShutDown"]);

watch(
  () => props.id,
  () => {
    if (props.id !== 0) {
      console.log("这是watch里面的props.name", props.name);
      console.log("这是watch里面的props.description", props.description);
      form.id = props.id;
      form.name = props.name;
      form.description = props.description;
      //   可以一次性传递一个对象，然后进行浅拷贝
      //   Object.assign(form,props.data)
    } else {
      form.id = 0;
      form.name = "";
      form.description = "";
    }
  }
);

const addFn = () => {
  formRef.value?.validate((ok: boolean) => {
    if (ok) {
      ElMessageBox.confirm("此操作将添加角色信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (props.id !== 0) {
            editRoleAPI(form).then((res) => {
              if (res.code === 200) {
                ElMessage.success("修改成功");
                formRef.value?.resetFields();
                form.description = "";
                emit("hide");
              }
            });
          } else {
            addRoleAPI(form).then((res) => {
              if (res.code === 200) {
                ElMessage.success("添加成功");
                formRef.value?.resetFields();
                form.description = "";
                emit("hide");
              }
            });
          }
        })
        .catch(() => {
          formRef.value?.resetFields();
        });
    } else {
      ElMessage.warning("请输入角色名字");
    }
  });
};
const CancelFn = () => {
  formRef.value?.resetFields();
  emit("hide");
};
</script>
<style lang="less" scoped></style>
